<%@page import="com.proyecto.bl.Usuario"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pagina principal</title>
<link href="scripts/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.crypt.js"></script>
 <script type="text/JavaScript">
           $(document).ready(function(){
               establecerNombre();
               $('#loginBtn').click(function(){
                   validate();
               }
               );
               $('#logOut').click(function(){
                   logout();
               }
               );
                   $('.hide').hide();
               
                });
                function logout(){
                    $.getJSON('LoginServlet?p3=3', 
                    function() {
                        window.location = "index.jsp";
                        });
                }
                function establecerNombre(){
                    $.getJSON('LoginServlet?p3=2', 
                    function(data) {
                       if(data!=null){
                         $('#bienvenido').html("Bienvenido, "+"<a href='usuario.jsp'>"+data.nombre+"</a>");
                         $('.hide').show();
                        }else{
                           $('#bienvenido').html("Bienvenido, visitante.");
                            $('.hide').hide();
                            }

                        });
                }
                function login(pass,name){
                    $.getJSON('LoginServlet?p1='+name+'&p2='+pass+'&p3=1', 
                    function(data) {
                        if(data!=null){
                         $('.hide').show();
                         $('#bienvenido').html("Bienvenido, "+data.nombre);
                            window.location = "consulta.jsp";

                        }
                        });
                    
                }
                function validate(){
                   var pass =  $('#password').val();
                   var name = $('#name').val();
                   if($(pass).val()!="" && $(name).val()!=""){                                       
                       login($().crypt({method:"md5",source:pass})
                       ,name);
                   }
                    
                }
</script>
</head>

<body>
   


        <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#FFFFFF"><table width="1000" border="0" cellspacing="0" cellpadding="0">

      
            <tr>
        <td height="83" valign="top" background="images/top-bg.gif" style="padding-top:51px;">
		<table width="284" border="0" align="left" cellpadding="0" cellspacing="0">
          <tr>
        
          </tr>
          <tr>
        
          </tr>
        </table></td>
        <td width="472" background="images/top-bg.gif"><img src="images/logo.png" width="250" height="134" /></td>
      </tr>
    </table>
      <table width="1000" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td id="button-bg">
		 <ul>
		<li><a href="index.jsp">HOME</a></li>
		<li><a href="consulta.jsp">CONSULTA</a></li>
                <li class="hide"><a href="usuario.jsp">MIS DATOS</a></li>
                <li class="hide" ><a href="reservas.jsp">MIS RESERVAS</a></li>
		</ul>
		  </td>
        </tr>
      </table>
<div id="login" style="float:right;">
<div id="bienvenido">   </div>  
<a href="#" id="logOut" class="hide" style="float:right;">  Salir </a>
</div>
      <table width="1000" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="17" height="16"></td>
          <td></td>
          <td width="16"></td>
          <td></td>
          <td width="17"></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td width="676"><img src="images/biblio.gif" width="500" height="253" /></td>
          <td>&nbsp;</td>
          <td width="274" valign="top"><table width="274" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="19"><img src="images/orange-left.gif" width="19" height="252" /></td>
              <td valign="top" background="images/orange-center.gif">
			  <table width="236" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td>
				  <table width="236" border="0" cellpadding="0" cellspacing="0">
                      <tr>
                        <td colspan="2" class="form-heading">Registro de Usuarios</td>
                      </tr>
                      <tr>
                          <form name="Login" action="LoginServlet" method="POST">
                        <td class="form-subheading">Usuario : </td>
                        <td align="left"><input name="name" type="text" class="form-text-box" id="name" size="15" maxlength="15" />
                        </td>
                      </tr>
                      <tr>
                        <td class="form-subheading">Clave : </td>
                        <td align="left"><input name="password" type="password" class="form-text-box" id="password" size="15" maxlength="15" /></td>
                      </tr>
                      <tr>
                          
                              
                          <td><input type="button" id="loginBtn" name="login" colspan="2" align="right" value="Login" ></td>
                          
                          
                          </form>
                      </tr>
                  </table></td>
                    
       

                </tr>
                <tr>
                  <td align="center"><img src="images/dot-line.gif" width="230" height="2" vspace="15" /></td>
                </tr>
                <tr>
                  <td valign="top">
				  <table width="236" border="0" cellpadding="0" cellspacing="0">
                      <tr>
                        
                      </tr>
                      <tr>
                       
                      </tr>
                  </table></td>
                </tr>
              </table></td>
              <td width="19"><img src="images/orange-right.gif" width="19" height="252" /></td>
            </tr>
          </table></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td height="16"></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td valign="top"><table width="676" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td class="warea"><h1>
                      
                    BIENVENIDO A LA BIBLIOTECA VIRTUAL</h1>.<br />
                <br />
                <br />
                </td>
            </tr>
            <tr>
              <td align="center"><img src="images/green-line.gif" width="670" height="1" vspace="20" /></td>
            </tr>
            <tr>
              <td class="warea"><h1>SEVICIOS</h1>
                             <br />
                <br />
                <br />
                </td>
            </tr>
          </table></td>
          <td>&nbsp;</td>
          <td valign="top"><table width="274" border="0" cellspacing="0" cellpadding="0">
            <tr>
             
            </tr>
          </table></td>
          <td>&nbsp;</td>
        </tr>
      </table>
      <table width="1000" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td>&nbsp;</td>
        </tr>
 
      </table>
   </td>
  </tr>
</table>
   
</body>
</html>

